<template>
	<view>
		<view class="comment" v-for="(res,index) in commentList" :key="index">
			<view class="left">
				<image :src="imageUrl(res.avatar)" mode="aspectFill" @click.stop="jumpUserHome(res.userId)"></image>
			</view>
			<view class="right">
				<view class="top">
					<view class="name">{{ res.userName }}</view>
					<view class="like" :class="{ highlight: res.isLike }">
						<view @click.stop="handelAction(res,'list')" class="more-dot">
							<u-icon name="more-dot-fill" color="#999"></u-icon>
						</view>
					</view>
				</view>
				<view class="content">{{ res.content }}</view>
				<view class="reply-box">
					<view class="item" v-if="res.childList.length>0">
						<view class="username">{{ res.childList[0].userName }}</view>
						<view class="text">{{ res.childList[0].content }}</view>
					</view>
					<view class="item" v-if="res.childList.length >1">
						<view class="username">{{ res.childList[1].userName }}</view>
						<view class="text">{{ res.childList[1].content }}</view>
					</view>
					<view class="all-reply" @tap="toAllReply(res)" v-if="res.childList.length>2">
						共{{ res.childList.length }}条回复
						<u-icon class="more" name="arrow-right" :size="26"></u-icon>
					</view>
				</view>
				<view class="bottom">
					{{ res.createTime|getPublishTime }}
					<view class="bottom-right">
						<view class="reply" @click="reply(res)">回复</view>
						<view class="right-item">
							<u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a"
								@click="getLike(index)"></u-icon>
							<u-icon v-if="res.isLike" name="thumb-up-fill" color="#00aaff" :size="30" @click="getLike(index)"></u-icon>
							<view class="num" style="margin-right: 30rpx;">{{ res.likeNumber }}</view>
							<u-icon name="thumb-down" :size="30"></u-icon>
						</view>

					</view>
				</view>
				<u-gap v-if="commentList.length!==index+1" style="margin-top: 20rpx;" height="1"
					bg-color="#e8e8e8"></u-gap>
			</view>
		</view>
		<u-popup v-model="showCommentDetail" :mask-close-able="false" mode="bottom" :closeable="false" z-index="999"
			border-radius="40" @close="closeCommentDetail">
			<view class="comment-detail-head border-b">
				<view class="flex">
					<view class="flex-1 detail-close" @click="closeCommentDetail">
						<u-icon name="close" size="30"></u-icon>
					</view>
					<view class="flex-2 detail-title">
						评论详情
					</view>
					<view @click.stop="handelAction(chooseComment,'choose')" class="flex-1 detail-more-dot">
						<u-icon name="more-dot-fill" size="30"></u-icon>
					</view>
				</view>
			</view>
			<scroll-view scroll-y="true" style="height: 80vh; padding-top: 50rpx;">
				<comment-detail  ref="commentDetail" :comment="chooseComment" @reply="reply"
					@handelAction="handelAction"></comment-detail>
				<u-loadmore status="nomore"></u-loadmore>
				<!-- <view> -->
				<view style="height: 150rpx;"></view>
			</scroll-view>
		</u-popup>
		<!-- 操作弹窗 -->
		<u-popup v-model="showAction" mode="bottom" border-radius="30">
			<view class="operation-tool">
				<view class="head-title">管理</view>
				<view class="operation-bottom">
					<view v-if="reportShow" class="operation-item" @click="onAction('report')">
						<view class="circular-box">
							<u-icon class="circular-icon" name="warning" size="38"></u-icon>
						</view>
						<view class="item-text">举报</view>
					</view>
					<view class="operation-item" @click="onAction('delete')" v-else>
						<view class="circular-box">
							<u-icon class="circular-icon" name="trash" size="38"></u-icon>
						</view>
						<view class="item-text">删除</view>
					</view>
				</view>
				<view class="cancel" @click="showAction=false">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import CommentDetail from './comment-detail.vue'
	export default {
		name: "CommentList",
		components: {
			CommentDetail
		},
		props: {
			commentList: {
				type: Array
			}
		},
		data() {
			return {
				showAction: false,
				showCommentDetail: false,
				actonChooseComment: undefined,
				chooseComment: undefined,
				reportShow: true,
				actionType: 'list'
			};
		},
		filters: {
			getPublishTime(dateString) {
				return uni.$u.timeFrom(new Date(dateString), false)
			},
		},
		onLoad() {

		},
		methods: {
			jumpUserHome(uid) {
				uni.navigateTo({
					url: "/pages/platform/user/user-space?uid=" + uid
				})
			},
			getCommentDetail() {
				this.$refs.commentDetail.replyDetailComment()
			},
			reply(comment) {
				this.$emit('reply', comment)
			},
			handelAction(item, actionType) {
				this.actionType = actionType
				this.actonChooseComment = item;
				this.reportShow = this.vuex_user.id !== item.userId
				this.showAction = true;
			},
			onAction(operation) {
				if (operation === 'report') {

				} else if (operation === 'delete') {
					this.deleteComment()
				}
				this.showAction = false
			},
			deleteComment() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否删除改评论',
					success(res) {
						let ids = []
						ids.push(that.actonChooseComment.id)
						if (res.confirm === true) {
							that.$u.api.commentData.delete({
								ids: ids
							}).then(res => {
								that.changeComment()
							})
						}
					}
				})
			},
			changeComment() {
				if (this.actionType === 'list') {
					this.commentList.splice(this.commentList
						.findIndex(item => item.id === this.actonChooseComment.id), 1)
				} else if (this.actionType === 'choose') {
					this.showCommentDetail = false
					this.commentList.splice(this.commentList
						.findIndex(item => item.id === this.actonChooseComment.id), 1)
				} else if (this.actionType === 'detail') {
					this.$refs.commentDetail.deleteComment()
				}
			},
			imageUrl(itemUrl) {
				return this.handleUrl(itemUrl)
			},
			closeCommentDetail() {
				this.showCommentDetail = false
				this.$emit('closeCommentDetail')
			},
			// 跳转到全部回复
			toAllReply(comment) {
				this.chooseComment = this.actonChooseComment = comment
				this.$emit('toAllReply', comment)
				this.showCommentDetail = true
			},

			reloadAllReply(comment) {
				console.log(comment);
				this.chooseComment = comment

			},

			// 点赞
			getLike(index) {
				let userLike = {
					itemId :this.commentList[index].id
				}
				this.$u.api.commentData.likeComment(userLike).then(res=>{
					if(res.data){
						this.commentList[index].isLike = !this.commentList[index].isLike;
						if (this.commentList[index].isLike == true) {
							this.commentList[index].likeNumber++;
						} else {
							this.commentList[index].likeNumber--;
						}
					}
				})
				
			},

		}
	};
</script>

<style lang="scss" scoped>
	.comment {
		display: flex;
		padding: 10rpx;

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.name {
					color: #5677fc;
				}

				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;


				}

				.highlight {
					color: #5677fc;

					.num {
						color: #5677fc;
					}
				}
			}

			.content {
				margin-bottom: 10rpx;
			}

			.reply-box {
				background-color: rgb(242, 242, 242);
				border-radius: 12rpx;

				.item {
					padding: 20rpx;
					border-bottom: solid 2rpx $u-border-color;

					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.bottom {
				margin: 20rpx 0;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;

				.bottom-right {
					margin-left: auto;
					display: flex;
				}

				.right-item {
					display: flex;
					align-items: center;
					color: #999;
					margin-left: 20rpx;
					font-size: 24rpx;
				}

				.reply {
					color: #5677fc;
					margin-right: 30rpx;
				}

				.num {
					margin-left: 5rpx;
					color: #9a9a9a;
				}
			}
		}
	}

	.comment-detail-head {
		margin-top: 30rpx;
		padding-bottom: 30rpx;


		.detail-close {
			padding-left: 20rpx;
		}

		.detail-title {
			font-size: 16px;
			font-weight: 700;
			line-height: 16px;
			text-align: center;
		}

		.detail-more-dot {
			display: flex;
			justify-content: flex-end;
			padding-right: 20rpx;
		}

	}

	.operation-tool {

		.head-title {
			padding: 20rpx;
			padding-bottom: 0;
			font-size: 14px;
		}

		.operation-bottom {
			padding: 20rpx;
			color: #999;
			display: inline-flex;

			.operation-item {
				margin-right: 50rpx;

				.circular-box {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 72rpx;
					height: 72rpx;
					margin-top: 20rpx;
					margin-bottom: 10rpx;
					background-color: #F6F5FA;
					border-radius: 50%;

					.circular-icon {
						display: flex;

					}
				}

				.item-text {
					display: flex;
					margin-left: 10rpx;
				}
			}

		}

		.cancel {
			padding: 20rpx;
			background-color: #F6F5FA;
			font-size: 16px;
			text-align: center;
		}
	}
</style>